<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_props的基本形式</title>
</head>

<body>
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 转换jsx的库 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入PropType库  min没有警告-->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">/* 此处要写babel */
        // 创建组件
        class Person extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age} </li>
                        <li>性别：{sex} </li>
                    </ul>
                )
            }
        }

        Person.propTypes = {
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string
        }

        Person.defaultProps = {
            age: 25,
            sex: '男'
        }

        // ReactDOM.render 不再支持
        const root = ReactDOM.createRoot(document.getElementById('test'));
        const root1 = ReactDOM.createRoot(document.getElementById('test1'));
        const root2 = ReactDOM.createRoot(document.getElementById('test2'));
        root.render(<Person name="Zhangsan" age={18} sex='男' />);
        root1.render(<Person name="Lisi" age={19} sex='女' />);
        const P = { name: "Wangwu", age: 20, sex: '男' }
        root2.render(<Person {...P} />);


    </script>
</body>

</html>